<template>
  <div>
    <div class="gift" v-for="(item,index) in giftData" :key="index" @click="openPrizeBag(item)">
      <div class="banner">
        <img src="../../../images/new_usr_box.png" alt="">
      </div>
      <div class="words">
        <p class="title">{{item.packName}}</p>
        <p>内置“挖宝”游戏，挖草送神秘宝贝。快来玩哦...</p>
      </div>
    </div>
    <game-model @close="close" v-if="queryGift">
      <gift-bag :coupons="coupons" :game-props="gameProps" :yun="yun"></gift-bag>
    </game-model>
    <no-data v-if="!giftData"></no-data>
  </div>
</template>

<script>
import { giftList, openBox } from 'src/service/getData3.js'
import GameModel from 'src/pages/activities/games/model.vue'
import { mapState } from 'vuex'
import GiftBag from 'src/pages/activities/games/bag.vue'
import { MessageBox, Indicator,Toast } from 'mint-ui'

export default {
  name: 'my-gift',
  components: {GiftBag, GameModel},
  data: () => ({
    giftData: [],
    queryGift: false,
    coupons: [],
    gameProps: {},
    yun: '',

  }),
  created() {
    this.myGift()
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo,
      position: state => state.coupon.position
    })
  },
  methods: {
    close() {
      this.queryGift = false
//    this.myGift()
     this.$router.push({path:'/center'})
    },
    async myGift() {
      // Indicator.open('正在加载中...')
      this.$store.commit('changeState', true)
      let data = (await giftList({usrId: this.userInfo.usrId}))
      if (data.respCode === '00') {
        this.giftData = data.content? data.content.result : ''
      } else {
        Toast({
          message: data.content,
          duration: 1000
        });
      }
    },
    openPrizeBag(item) {
      let that = this
      if (!this.position) { // 地理位置不存在 重新获取
        wx.ready(res => {
          wx.getLocation({
            type: 'gcj02',
            success: async res => {
              let sit = res.longitude + "," + res.latitude;
              that.$store.commit("usr_position", sit);
              that.query(item)
            },
            fail() {
              Toast({
                message: '地理位置获取失败',
                duration: 1000
              })
            },
            complete() { // 接口调用完成时执行的回调函数，无论成功或失败都会执行
            },
            cancel: function() { // 这个地方是用户拒绝获取地理位置
              MessageBox('开启定位才能获取礼包哦！')
            }
          })
        })
      } else {
        this.query(item)
      }
    },
    async query(item) {
      this.$store.commit('changeState', true)
      let data = await openBox({
        usrId: this.userInfo.usrId,
        packId: item.packId,
        position: this.position  // 121.419243,31.208285
      })
      if (data.respCode === '00') {
        this.queryGift = true
        let giftBox = data.content.firstPackage
        let list = data.content.couponSearch;
        list.forEach(item => {
          item.num = giftBox.couponNum
        })
        this.coupons = list
        this.gameProps = giftBox
        this.yun = giftBox.yun
      } else {
        Toast({
          message: data.content,
          duration: 1000
        });
      }
      // } else {
      //   let that = this
      //   MessageBox('开启定位才能获取礼包哦！').then(rep => {
      //     that.$store.commit('changeState', false)
      //   })
      // }
    }
  }
}
</script>

<style lang="css" scoped>
.gift {
  width: 100%;
}
.banner {
  background-color: #fff;
  overflow: hidden;
}
.banner img {
  width: 100%;
}
.words {
  padding: 1rem 0.8rem;
  background-color: #fff;
  font-size: 0.9rem;
}
.title {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
</style>
